import React, { useEffect, useState } from 'react'
/**Effect 影响的意思 */
export default function EffectCom() {
  let [num, setNum] = useState(0);
  let [num2, setNum2] = useState(100);
  //基本使用   『重点』
  useEffect(() => { 
    //相当于 componentDidMount 钩子函数
    console.log('mount...'); 

    //返回的函数, 相当于 componentWillUnmount 钩子函数
    return () => {
      console.log('unmount....');
    }
  }, []);

  //useEffect 在函数中可以多次调用
  useEffect(() => {
    console.log('run ....');
  }, []);

  //useEffect 只指定一个参数
  //该回调函数会在组件挂载完成以及组件更新完成之后, 自动执行
  //相当于 componentDidMount 与 componentDidUpdate 的合体  几乎不用
  // useEffect(() => {
  //   console.log('go go go');
  // });

  //useEffect 第二个参数数组不为空的情况.  『重点』 主要作用: 封装简化代码
  //该回调函数会在组件挂载完成执行, 并且当依赖项的值发生了更新, 回调也会执行
  useEffect(() => {
    console.log('xxx');
  }, [num]); //第二个参数为回调的依赖, 后续更新如果依赖的值发生了变化, 则回调函数才会执行, 如果更新后, 依赖的值没有变化, 则回调函数不会执行

  return (
    <div>
      <h2>{num}</h2>
      <button onClick={() => setNum(num + 1)}>更新</button>
      <hr />
      <h2>{num2}</h2>
      <button onClick={() => setNum2(num2 + 1)}>更新</button>
    </div>
  )
}
